<require>compressImg $ createUrl fileSize</require>

<template id="bodyTpl">
    <input type="file"/>
    <div id="info"></div>
    <div>
        <img style="display: none">
    </div>    
</template>    

<script>
$('body').append(bodyTpl);    

$('input').on('change', function (e) 
{
    e = e.origEvent;
    var file = e.target.files[0];
    if (!file) return;

    var size = fileSize(file.size);

    compressImg(file, {
        maxWidth: 400,
        maxHeight: 300,
        quality: 0.4
    }, function (err, file) 
    {
        $('img').attr('src', createUrl(file)).show();
        $('#info').text('Size: ' + size + ' Compressed: ' + fileSize(file.size));
    });
});
</script>